<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <h2>供应商管理</h2>
      </div></el-col>
    </el-row>

    <el-dialog
        :visible.sync="addSupplierShow"
        width="60%"
        @opened="open"
    >
      <AddSupplier :movie-id="supplierId" v-if="supplierShow" ref="supplierRef"></AddSupplier>
    </el-dialog>

    <el-dialog
        :visible.sync="updateSupplierShow1"
        width="60%"
        @opened="open"
    >
      <UpdateSupplier :movie-id="updateSupplierId" v-if="updateSupplierShow2" ref="updateSupplierRef"></UpdateSupplier>
    </el-dialog>

    <el-dialog
        :visible.sync="findBySupplier1"
        width="60%"
        @opened="open"
    >
      <FindBySupplier :movie-id="findBySupplierId" v-if="findBySupplier2" ref="findBySupplierRef"></FindBySupplier>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%">
            <el-table-column
                prop="supplierName"
                label="供应商名称"
                align="center">
            </el-table-column>
            <el-table-column
                prop="supplierUser"
                label="负责人"
                align="center">
            </el-table-column>
            <el-table-column
                prop="supplierScope"
                label="经营范围"
                align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="currentPageFn"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>


    <el-row style="margin-top: 50px">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-button type="primary" plain style="margin-right: 20px" @click="addSupplier">添加供应商</el-button>
          <el-button type="primary" plain style="margin-left: 20px" @click="updateSupplier">修改供应商信息</el-button>
          <br>
          <el-button type="primary" plain style="margin-top: 20px;margin-right: 180px" @click="findBySupplier">查看供应商</el-button>
        </div>
      </el-col>

      <el-col :span="9">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="margin-right: 60px">查询供应商信息</span>
              <el-row style="margin-top: 15px">
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple">
                    供应商名称：
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-input v-model="supplierName" placeholder="请输入内容" class="labClass"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row style="margin-top: 10px">
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple">
                    经营范围：
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-input v-model="supplierScope" placeholder="请输入内容" class="labClass"></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" plain style="margin-right: 20px" @click="init">查询</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import AddSupplier from "@/components/supplier/addSupplier";
import UpdateSupplier from "@/components/supplier/updateSupplier";
import FindBySupplier from "@/components/supplier/findBySupplier";

export default {
  name: "supplier",
  components: {FindBySupplier, UpdateSupplier, AddSupplier},
  data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 4,
      currentPage: 1,
      supplierName: null,
      supplierScope: null,
      addSupplierShow: false,
      supplierId: 0,
      supplierShow: false,

      currentRow:'',

      updateSupplierShow1:false,
      updateSupplierShow2:false,
      updateSupplierId:0,

      findBySupplier1:false,
      findBySupplier2:false,
      findBySupplierId:0
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let params = {
        current: this.currentPage,
        size: this.pageSize,
        supplierName: this.supplierName,
        supplierScope: this.supplierScope
      }
      this.$axios.get('drp/supplier/findByItem', {params: params}).then(
          r => {
            this.tableData = r.data.records;
            this.total = r.data.total;
          }
      )
    },
    handleCurrentChange(val) {
      this.currentRow=val
    },
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
    addSupplier() {
      this.addSupplierShow = true
      this.supplierShow=true
    },
    open(){
      console.log("添加供应商已被打开")
    },
    updateSupplier(){
      if (this.currentRow==''){
        this.$message({
          message: '请选中一行',
          type: 'warning'
        });
      }else {
        this.updateSupplierShow1=true
        this.updateSupplierShow2=true
        this.$nextTick(()=>{
          this.$refs.updateSupplierRef.init(this.currentRow.supplierId)
        })
      }
    },
    findBySupplier(){
      if (this.currentRow==''){
        this.$message({
          message: '请选中一行',
          type: 'warning'
        });
      }else {
        this.findBySupplier1=true
        this.findBySupplier2=true
        this.$nextTick(()=>{
          this.$refs.findBySupplierRef.init(this.currentRow.supplierId)
        })
      }
    }
  }
}
</script>

<style scoped>

</style>